{% extends 'base.html' %}



{% block contents_inner %}
<div class="col-12">
    <div class="section-content">

        <div class="row">
            <div class="col-sm-12">
                <form action="{% url 'chart:AQI_line_chart' %}" method="post">
                    {% csrf_token %}
                    <select id="provinceSelect" class="form-control" name="province">
                        <option value="">请选择省份</option>
                        {% for province in provinces %}
                            <option value="{{ province }}">{{ province }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="content-details" id="aqiChart" style="width: 100%; height: 600px;"></div>
            </div>
        </div>

    </div>
</div>

{% endblock %}





{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('aqiChart'));

    $('#provinceSelect').change(function() {
        var province = $(this).val();
        if (province) {
            $.ajax({
                url: '{% url 'chart:AQI_line_chart' %}', // 这里填写后端提供AQI数据的URL
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'province': province},
                success: function(data) {
                    var option = {
                        title: {
                            left: 'center',
                            text: province + '的AQI数据'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '5%',
                            right: '15%',
                            bottom: '10%'
                        },
                        xAxis: {
                            data: data.dates // 假设dates是日期数组
                        },
                        yAxis: {},
                        toolbox: {
                            right: 10,
                            feature: {
                              dataZoom: {
                                yAxisIndex: 'none'
                              },
                              restore: {},
                              saveAsImage: {}
                            }
                        },
                        dataZoom: [
                            {
                              startValue: '2019-01-01'
                            },
                            {
                              type: 'inside'
                            }
                        ],
                        visualMap: {
                            top: 50,
                            right: 10,
                            pieces: [
                              {
                                gt: 0,
                                lte: 50,
                                color: '#93CE07'
                              },
                              {
                                gt: 50,
                                lte: 100,
                                color: '#FBDB0F'
                              },
                              {
                                gt: 100,
                                lte: 150,
                                color: '#FC7D02'
                              },
                              {
                                gt: 150,
                                lte: 200,
                                color: '#FD0100'
                              },
                              {
                                gt: 200,
                                lte: 300,
                                color: '#AA069F'
                              },
                              {
                                gt: 300,
                                color: '#AC3B2A'
                              }
                            ],
                            outOfRange: {
                              color: '#999'
                            }
                        },
                        series: [{
                            name: 'AQI',
                            type: 'line',
                            data: data.aqi_values, // 假设aqi_values是对应的AQI数据数组
                            markLine: {
                              silent: true,
                              lineStyle: {
                                color: '#333'
                              },
                              data: [
                                {
                                  yAxis: 50
                                },
                                {
                                  yAxis: 100
                                },
                                {
                                  yAxis: 150
                                },
                                {
                                  yAxis: 200
                                },
                                {
                                  yAxis: 300
                                }
                              ]
                            }
                        }]
                    };
                    myChart.setOption(option);
                },
                error: function(error) {
                    console.error('请求AQI数据失败:', error);
                }
            });
        }
    });
</script>
{% endblock %}
